<template>
    
    <div class="game">
        <h2>游戏列表</h2>
        <slot :youxi="games" x="哈哈" y="你好" name="qwe"></slot>
        <ul>
            <li v-for="item in games" :key="item.id">
                <RouterLink :to="{
                    path: '/Game/Detail',
                    query: {
                        content: item.name,
                    }
                }">{{ item.name }}</RouterLink>
                <button @click="Jump(item.name)">跳转</button>
            </li>
            
        </ul>
    </div>
    <div class="show">
        <RouterView></RouterView>
    </div>
</template>
<script lang="ts" setup name="Game">
    import {onMounted, reactive} from 'vue'
    import { useRouter } from 'vue-router';
    const router=useRouter()
    let games=reactive([
        {id:"01",name: "LOL"},
        {id: "02", name: "原神"},
        {id: "03",name: "王者"},
        {id: "04" , name: "地平线"},
    ])
    function Jump(val: string){
        router.push({
            path: "/Game/Detail",
            query: {
                content: val
            }
        })
    }
</script>
<style scoped>
    .game{
        width: 200px;
        height: 300px;
        background-color: skyblue;
        border-radius: 10px;
        box-shadow: 0 0 10px;
    }
    h2{
        background-color: orange;
        text-align: center;
        font-size: 20px;
        font-weight: 700
    }
</style>